<template>
  <window
    ref="win"
    title="订单详情"
  >
    <form
      class="am-form tpl-form-border-form tpl-form-border-br"
      data-am-validator
      :id="id"
      onsubmit="return false "
    >
      <div class="am-u-sm-12 am-scrollable-horizontal">
        <table
          width="100%"
          class="am-table am-table-bordered am-table-compact am-table-striped am-text-nowrap"
        >
          <thead class="bg-color">
            <tr>
              <th>班级名称</th>
              <th>年级</th>
              <th>开课日期</th>
              <th>上课时间</th>
              <th>讲数</th>
              <th>起止讲数</th>
              <th>学费</th>
              <th>已缴/未缴讲数</th>
              <th v-if="courseOrder.chargingStatus != 2 ">缴费讲数</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in regDetails">
              <td>{{item.courseClass.classNo}}|{{item.courseClass.className}}</td>
              <td>{{item.courseClass.gradeName}}</td>
              <td>{{item.courseClass.startCourseTime | formatDate}}</td>
              <td>{{item.courseClass.classDateTip}} {{item.courseClass.studyingTime}}</td>
              <td>{{item.courseClass.lectureAmount}}</td>
              <td>{{item.studentReg.initStartAmount}}-{{item.studentReg.initEndAmount}}</td>
              <td>{{item.studentReg.srcTotalAmount}}</td>
              <td>{{item.studentReg.payLectureAmount}}/{{ (item.studentReg.initEndAmount - item.studentReg.initStartAmount + 1) - item.studentReg.payLectureAmount }}</td>
              <td v-if="courseOrder.chargingStatus != 2 ">
                <input
                  type="number"
                  class="am-form-field am-input-sm"
                  v-model="item.studentReg.willPayLectureAmount"
                  @change="changePayLectureAmount(item.studentReg)"
                />
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="am-u-sm-12 am-scrollable-horizontal">
        <table
          width="100%"
          class="am-table am-table-bordered am-table-compact"
        >

          <colgroup>
            <col width="100" />
            <col width="100" />
            <col width="100" />
            <col width="100" />
            <col width="100" />
            <col width="100" />
            <col width="100" />
            <col width="100" />
            <col
              width="100"
              v-if="courseOrder.chargingStatus != 2 "
            />
          </colgroup>
          <tbody>
            <tr>
              <td class="bgColor">总计金额</td>
              <td><span class="am-text-danger">￥{{courseOrder.totalAmount}}</span></td>
              <td class="bgColor">优惠金额</td>
              <td><span class="am-text-danger">￥{{ ( courseOrder.totalAmount - courseOrder.payableAmount) | formatNumber(2)}}</span></td>
              <td class="bgColor">应缴金额</td>
              <td><span class="am-text-danger">￥{{courseOrder.payableAmount}}</span></td>
            </tr>
            <tr>
              <td class="bgColor">已缴金额</td>
              <td><span class="am-text-danger">￥{{courseOrder.paidAmount}}</span></td>
              <td class="bgColor">待缴金额</td>
              <td><span class="am-text-danger">￥{{ ( courseOrder.payableAmount-courseOrder.paidAmount ) | formatNumber(2) }}</span></td>
              <td colspan="2"></td>
            </tr>
            <tr>
              <td class="bgColor">优惠详情</td>
              <!--<td colspan="5" v-html="discountDetail"></td>-->
              <td
                colspan="5"
                style="position: relative"
              >
                <input
                  required
                  type="text"
                  class="am-input-sm"
                  :style="{display:'inline',minHeight: '36px',width:'700px',height: height}"
                  readonly
                >
                <div
                  class="discount-tag"
                  ref="discountTags"
                >
                  <el-tag
                    v-for="tag in discountNames"
                    :key="tag.discountName"
                    :closable="tag.fromSrc !== '0' && courseOrder.chargingStatus !== '2'"
                    @close="handleCloseTag(tag)"
                    :type="courseOrder.chargingStatus !== '2' ? 'primary' : 'default'"
                  >
                    {{tag.discountName}}
                  </el-tag>
                </div>
                <button
                  v-if="courseOrder.chargingStatus != 2 "
                  type="button"
                  class="am-btn am-btn-default am-btn-sm"
                  @click="setupDiscount"
                >添加优惠</button>
              </td>
            </tr>
            <tr v-if="courseOrder.chargingStatus != 2 ">
              <td class="bgColor">缴费金额</td>
              <td><input
                  type="number"
                  step="0.01"
                  min="1"
                  class="am-input-sm"
                  v-model="formData.payAmount"
                  readonly
                /></td>
              <td colspan="4">
                <template v-for=" (pay,index) in formData.pays">
                  <label style="display: inline-block;vertical-align: middle;padding-left: 14px">
                    {{ pay.label }}
                  </label>
                  <input
                    type="number"
                    step="0.01"
                    min="0"
                    class="am-input-sm"
                    v-model="formData.pays[index].amount"
                    style="display: inline-block;vertical-align: middle;width: 100px ;"
                  />
                </template>

              </td>
            </tr>
            <tr v-if="courseOrder.chargingStatus != 2 ">
              <td class="bgColor">收费校区</td>
              <td colspan="5">
                <input
                  required
                  type="text"
                  placeholder="校区"
                  class="am-input-sm"
                  style="display:inline;width:300px;"
                  v-model="formData.chargeCampusName"
                  readonly
                  @click="$refs.selectCampus.show()"
                >
                <button
                  type="button"
                  class="am-btn am-btn-default am-btn-sm"
                  @click="$refs.selectCampus.show()"
                >选择</button>
              </td>

            </tr>

            <tr v-if="courseOrder.chargingStatus != 2 ">
              <td class="bgColor">咨询师</td>
              <td colspan="5">
                <input
                  :disabled="courseOrder.chargingStatus!=='0'"
                  required
                  type="text"
                  placeholder="咨询师"
                  class="am-input-sm"
                  style="display:inline;width:300px;"
                  v-model="formData.counselorName"
                  readonly
                  @click="setupSenior()"
                >
                <button
                  :disabled="courseOrder.chargingStatus!=='0'"
                  type="button"
                  class="am-btn am-btn-default am-btn-sm"
                  @click="setupSenior()"
                >选择</button>
              </td>
            </tr>
            <tr>
              <td class="bgColor">介绍学生</td>
              <td colspan="2">
                <div style="position:relative">
                  <input
                    :disabled="courseOrder.chargingStatus!=='0'"
                    type="text"
                    placeholder="选择学生"
                    class="am-input-sm"
                    style="display:inline;width:200px;"
                    v-model="studentObj.studentName"
                    readonly
                    @click="searchStudent()"
                  >
                  <div
                    class="closeBtn"
                    v-if="studentObj.studentName && !(courseOrder.chargingStatus!=='0')"
                    @click="deleteItem($event, 'student')"
                  >
                    <i class="el-icon-circle-close"></i>
                  </div>
                  <button
                    :disabled="courseOrder.chargingStatus!=='0'"
                    type="button"
                    class="am-btn am-btn-default am-btn-sm"
                    @click="searchStudent()"
                  >选择</button>
                </div>
              </td>
              <td class="bgColor">介绍老师</td>
              <td colspan="2">
                <div style="position:relative">
                  <input
                    :disabled="courseOrder.chargingStatus!=='0'"
                    type="text"
                    placeholder="选择老师"
                    class="am-input-sm"
                    style="display:inline;width:200px;"
                    v-model="teacherObj.teacherName"
                    readonly
                    @click="searchTeacher()"
                  >
                  <div
                    class="closeBtn"
                    v-if="teacherObj.teacherName && !(courseOrder.chargingStatus!=='0')"
                    @click="deleteItem($event, 'teacher')"
                  >
                    <i class="el-icon-circle-close"></i>
                  </div>
                  <button
                    :disabled="courseOrder.chargingStatus!=='0'"
                    type="button"
                    class="am-btn am-btn-default am-btn-sm"
                    @click="searchTeacher()"
                  >选择</button>
                </div>

              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div
        class="am-u-sm-12 am-text-left am-form-group"
        v-if="courseOrder.chargingStatus === '2'"
      >
        <el-button
          @click="handleDownload"
          :disabled="!hasAttachment"
        >下载附件</el-button>
      </div>

      <div
        class="am-u-sm-12 am-text-center am-margin-top-lg"
        v-if="courseOrder.chargingStatus != 2 &&(hasWindowPermission('/main/enroll/student/search','pos')||hasWindowPermission('/main/enroll/student/search','balance')||hasWindowPermission('/main/enroll/student/search','cash'))"
      >
        <button
          type="button"
          class="am-btn am-btn-primary"
          @click="confirmPay"
        >确定缴费</button>
      </div>
      <window
        ref="teacher"
        title="选择老师"
      >
        <selectTeacher
          v-if="showSelectTeacher"
          :query="applyClassForm"
          @selectConfirm="selectConfirmTeacher"
        ></selectTeacher>
      </window>
      <window
        ref="student"
        title="查询"
      >
        <SearchStudentList
          @sureFunc="sureFunc"
          @closeWindow="closeWindow"
          @addStudent="addStudent"
          :isComponent="true"
          courseOrder="yes"
        />
      </window>
      <select-campus
        ref="selectCampus"
        @ok="selectCampusCallback"
      ></select-campus>
      <select-senior
        ref="selectSenior"
        @ok="updateSenior"
      ></select-senior>
      <select-discount
        ref="selectDiscount"
        @ok="updateDiscount"
      ></select-discount>
    </form>
  </window>

</template>

<style scoped>
.am-table > tbody > tr > td,
.am-table > tbody > tr > th {
  text-align: left;
}
.bgColor {
  background-color: #eee;
  text-align: center !important;
}
</style>


<script>
import io from '../../lib/io'
import conf from '../../lib/conf'
import util from '../../lib/util'
import math from '../../lib/math'
import storage from '../../lib/storage'
import selectTeacher from '../base/selectTeacher'
import SelectCampus from '../teachingresource/SelectCampus'
import SelectSenior from '../course/SelectSenior'
import SelectDiscount from './SelectDiscount.vue'
import SearchStudentList from './SearchStudentList.vue'

export default {
  props: ['regSearchStudentObj'],
  data: function() {
    let chargeCampus = storage.getChargeCampus()

    return {
      height: '36px',
      regDetails: [],
      discounts: [],
      formData: {
        pays: [],
        payAmount: '',
        courseOrderId: '',
        chargeCampusId: chargeCampus ? chargeCampus.campusId : '',
        chargeCampusName: chargeCampus ? chargeCampus.campusName : '',
        counselorName: storage.getLogin().realName,
        counselorId: storage.getLogin().userId,
        payLectures: []
      },
      teacherObj: {},
      studentObj: {},
      courseOrder: {},
      payQRCodeUrl: '',
      discountDetail: '无',
      courseOrderId: '',
      areaTeamId: '',
      hasAttachment: false,
      discountNames: [],
      studentBalanceAmount: 0,
      applyClassForm: {
        areaTeamId: '',
        periodId: '',
        busTeamId: '',
        gradeId: '',
        level: '',
        subjectId: '',
        startCourseTime: '',
        studyingTime: '',
        teacherId: '',
        teacherName: '',
        applyReason: '',
        applyClassId: ''
      },
      showSelectTeacher: false
    }
  },
  components: {
    'select-campus': SelectCampus,
    'select-senior': SelectSenior,
    'select-discount': SelectDiscount,
    selectTeacher,
    SearchStudentList
  },
  watch: {
    discountNames() {
      this.$nextTick(() => {
        this.height = this.$refs.discountTags.clientHeight + 12 + 'px'
      })
    },
    'formData.payAmount': function() {
      this.preSetupPays()
    }
  },
  mounted: function() {
    $(window).smoothScroll()
  },
  methods: {
    deleteItem(e, type) {
      e.stopPropagation()
      if (type === 'student') {
        this.studentObj = {}
      } else if (type === 'teacher') {
        this.teacherObj = {}
      }
    },
    sureFunc(studentId, studentName) {
      this.studentObj = {
        studentId,
        studentName
      }
      this.$refs.student.close()
    },
    closeWindow() {
      this.$refs.student.close()
    },
    addStudent() {
      this.$refs.student.close()
    },
    getOtherStudentTeacher(ordId) {
      io.post(io.getIntroducersByOrder, { courseOrderId: ordId }, ret => {
        if (ret.success === true) {
          if (ret.data) {
            this.teacherObj = {
              teacherId: ret.data.teacherId,
              teacherName: ret.data.teacherName
            }
            this.studentObj = {
              studentId: ret.data.studentId,
              studentName: ret.data.studentName
            }
          } else {
            this.teacherObj = {}
            this.studentObj = {}
          }
        }
      })
    },
    searchStudent() {
      this.$refs.student.show({ width: 1000 })
    },
    selectConfirmTeacher(item) {
      this.$refs.teacher.close()
      this.showSelectTeacher = false
      this.teacherObj = item
    },
    searchTeacher() {
      this.applyClassForm.areaTeamId = this.areaTeamId
      this.showSelectTeacher = true
      this.$refs.teacher.show({ width: 1000 })
    },
    handleDownload() {
      this.discountNames.map(val => {
        if (val.attachmentUrls) {
          location.href = val.attachmentUrls
        }
      })
    },
    handleCloseTag(tag) {
      this.delCourseOrderDiscount(tag.discountId)
    },
    setupSenior: function() {
      this.$refs.selectSenior.query.areaTeamId = this.areaTeamId
      this.$refs.selectSenior.show()
    },
    setupDiscount: function() {
      this.$refs.selectDiscount.areaTeamId = this.areaTeamId
      this.$refs.selectDiscount.ruleForm.discountId = ''
      this.$refs.selectDiscount.ruleForm.attachmentUrls = ''
      this.$refs.selectDiscount.ruleForm.attachmentName = ''
      this.$refs.selectDiscount.ruleForm.discountAmount = ''
      this.$refs.selectDiscount.ruleForm.discountCode = ''
      this.$refs.selectDiscount.inputParams = []
      this.$refs.selectDiscount.courseOrderId = this.courseOrderId
      this.$refs.selectDiscount.disabledIds = []
      this.discountNames.map(val => {
        this.$refs.selectDiscount.disabledIds.push(val.discountId)
      })
      this.$refs.selectDiscount.show()
    },
    updateSenior: function(teacher) {
      var _this = this
      _this.formData.counselorName = teacher.teacherName
      _this.formData.counselorId = teacher.teacherId
    },
    updateDiscount(val) {
      this.discountNames = val
      this.loadCourseOrderDetail(this.courseOrderId)
    },
    delCourseOrderDiscount(discountId) {
      io.post(
        io.delCourseOrderDiscount,
        {
          discountId: discountId,
          courseOrderId: this.courseOrderId
        },
        ret => {
          if (ret.success) {
            this.loadCourseOrderDetail(this.courseOrderId)
          } else {
          }
        }
      )
    },
    changePayLectureAmount: function(studentReg) {
      if (
        studentReg.willPayLectureAmount < 0 ||
        studentReg.willPayLectureAmount > studentReg.remainPayLectureAmount
      ) {
        studentReg.willPayLectureAmount = studentReg.remainPayLectureAmount
      }
      this.reCalPayAmount()
    },
    reCalPayAmount: function() {
      function cal(studentReg) {
        let remainPay = new Number(math.sub(parseFloat(studentReg.totalAmount).toFixed(2) , parseFloat(studentReg.payAmount)).toFixed(2))
        if (
          studentReg.willPayLectureAmount == studentReg.remainPayLectureAmount
        ) {
          return remainPay
        }
        return new Number(
          (
            (remainPay / studentReg.remainPayLectureAmount) *
            studentReg.willPayLectureAmount
          ).toFixed(0)
        )
      }
      let payAmount = 0
      let payLectures = []
      for (let i = 0; i < this.regDetails.length; i++) {
        let amount = cal(this.regDetails[i].studentReg)
        payAmount += amount
        let start =
          this.regDetails[i].studentReg.initStartAmount +
          this.regDetails[i].studentReg.payLectureAmount
        let end =
          start + parseInt(this.regDetails[i].studentReg.willPayLectureAmount)
        payLectures.push({
          regId: this.regDetails[i].studentReg.regId,
          start: start,
          end: end - 1,
          payAmount: amount ? amount.toFixed(2) : amount
        })
      }
      this.formData.payAmount = payAmount ? payAmount.toFixed(2) : payAmount
      this.formData.payLectures = payLectures
    },
    loadCourseOrderDetail: function(courseOrderId) {
      var _this = this
      if (courseOrderId) {
        io.post(
          io.apiAdminCourseOrderDetail,
          { courseOrderId: courseOrderId },
          function(ret) {
            if (ret.success) {
              let oldRegDetails = _this.regDetails
              _this.regDetails = ret.data.regDetailVos
              _this.regDetails.forEach(item => {
                item.studentReg.initStartAmount = parseInt(
                  item.studentReg.initStartAmount
                )
                item.studentReg.initEndAmount = parseInt(
                  item.studentReg.initEndAmount
                )
                item.studentReg.payLectureAmount = parseInt(
                  item.studentReg.payLectureAmount
                )
                item.studentReg.totalLectureAmount =
                  item.studentReg.initEndAmount -
                  item.studentReg.initStartAmount +
                  1
                item.studentReg.remainPayLectureAmount =
                  item.studentReg.totalLectureAmount -
                  item.studentReg.payLectureAmount
                item.studentReg.willPayLectureAmount =
                  item.studentReg.remainPayLectureAmount
                if (oldRegDetails.length > 0) {
                  for (let i = 0; i < oldRegDetails.length; i++) {
                    if (
                      oldRegDetails[i].studentReg.regId == item.studentReg.regId
                    ) {
                      item.studentReg.willPayLectureAmount = Math.min(
                        item.studentReg.willPayLectureAmount,
                        oldRegDetails[i].studentReg.willPayLectureAmount
                      )
                      break
                    }
                  }
                }
              })

              let pays = []

              if (
                _this.hasWindowPermission('/main/enroll/student/search', 'pos')
              ) {
                pays.push({
                  label: 'pos机',
                  payWay: 1,
                  amount: 0
                })
              }

              if (
                _this.hasWindowPermission(
                  '/main/enroll/student/search',
                  'balance'
                )
              ) {
                pays.push({
                  label: '账户余额',
                  payWay: 3,
                  amount: 0
                })
              }

              if (
                _this.hasWindowPermission('/main/enroll/student/search', 'cash')
              ) {
                pays.push({
                  label: '现金',
                  payWay: 0,
                  amount: 0
                })
              }
              _this.formData.pays = pays
              _this.formData.courseOrderId = ret.data.courseOrder.courseOrderId
              _this.beforeRenderOrder(
                ret.data.courseOrder,
                ret.data.regDetailVos
              )
              _this.getCourseOrderDiscount()
              _this.areaTeamId = ret.data.regDetailVos[0].courseClass.areaTeamId
              _this.formData.counselorName =
                ret.data.regDetailVos[0].studentReg.counselorName ||
                storage.getLogin().realName
              _this.formData.counselorId =
                ret.data.regDetailVos[0].studentReg.counselorId ||
                storage.getLogin().userId
              _this.studentBalanceAmount = 0
              async function loadStudentBalanceAmount() {
                await _this.loadStudentBalanceAmount(
                  ret.data.courseOrder.studentId
                )
                _this.preSetupPays()
              }

              loadStudentBalanceAmount()
            } else {
              _this.$alert(ret.desc)
            }
          }
        )
      }
    },
    getCourseOrderDiscount() {
      io.post(
        io.courseOrderDiscount,
        {
          courseOrderId: this.formData.courseOrderId
        },
        ret => {
          if (ret.success) {
            this.discountNames = ret.data
            if (
              this.discountNames.filter(item => {
                return !!item.attachmentUrls
              }).length
            ) {
              this.hasAttachment = true
            } else {
              this.hasAttachment = false
            }
          }
        }
      )
    },
    beforeRenderOrder: function(courseOrder) {
      this.courseOrder = courseOrder
      this.reCalPayAmount()
    },

    showPosPayCode: function() {
      this.$dialog(
        '请用pos机扫码',
        '<div style="min-height: 150px;"><img src="' +
          io.apiBarcodeEncode +
          '?content=' +
          this.requestPayId +
          '" /></div><div style="min-height: 300px;"><img src="' +
          io.apiQrcodeEncode +
          '?content=' +
          this.requestPayId +
          '" /></div><div>' +
          this.requestPayId +
          '</div>',
        () => {
          this.$closeDialog()
        }
      )
    },
    selectCampusCallback: function(campus) {
      this.formData.chargeCampusId = campus.campusId
      this.formData.chargeCampusName = campus.campusName
      storage.setChargeCampus(campus)
    },
    confirmPay: function() {
      // if (this.teacherObj.teacherName || this.studentObj.studentId) {
      io.post(
        io.saveOrUpdateIntroducers,
        {
          studentId: this.studentObj.studentId,
          studentName: this.studentObj.studentName,
          teacherId: this.teacherObj.teacherId,
          teacherName: this.teacherObj.teacherName,
          courseOrderId: this.formData.courseOrderId
        },
        () => {}
      )
      // }
      if (!this.formData.chargeCampusId) {
        this.$alert('请选择收费校区')
        return
      }

      if (this.formData.pays.length == 0) {
        this.$alert('请设置支付金额')
        return
      }

      if (
        this.formData.pays
          .map(p => new Number(p.amount))
          .reduce((s, i) => s + i, 0) != this.formData.payAmount
      ) {
        this.$alert('设置支付金额与缴费金额不相等')
        return
      }

      var _this = this
      _this.$confirm('确定缴费', function() {
        _this.$showLoading()
        let data = Object.assign({}, _this.formData)
        delete data.chargeCampusName
        delete data.counselorName
        data.pays = data.pays
          .filter(p => p.amount > 0)
          .map(p => {
            return { payWay: p.payWay, amount: p.amount }
          })
        io.postPlayload(io.apiAdminConfirmPayOrder, data, function(ret) {
          _this.$hiddenLoading()
          if (ret.success) {
            _this.requestPayId = ret.data

            if (data.pays.filter(p => p.payWay == 1).length == 1) {
              _this.showPosPayCode()
              _this.queryPayResult()
            } else {
              _this.$alert('缴费成功')
            }
            _this.$refs.win.close()
            _this.$root.$emit('order:new')
            _this.$emit('completed')
            _this.$root.$emit('mainAccount:change')
          } else {
            _this.$alert(ret.desc || '缴费失败')
          }
        })
      })
    },
    queryPayResult: function() {
      var _this = this
      function checkWorker() {
        if (!_this.requestPayId) {
          return
        }
        $.ajax({
          url: io.apiAdminQueryPayResult,
          type: 'POST',
          data: {
            requestPayId: _this.requestPayId,
            accessToken: io.getHeaders().accessToken
          },
          dataType: 'text',
          timeout: 0,
          success: function(data) {
            if (data == 'Y') {
              _this.$root.$emit('order:pay:success')
              _this.$closeDialog()
              _this.$alert('支付成功')
            } else {
              checkWorker()
            }
          },
          error: function(xhr, status, error) {
            checkWorker()
          }
        })
      }
      checkWorker()
    },
    show: function() {
      this.$refs.win.show({ width: 1000 })
      this.getOtherStudentTeacher(this.courseOrderId)
      this.loadCourseOrderDetail(this.courseOrderId)
    },
    loadStudentBalanceAmount: function(studentId) {
      var _this = this
      let action = {}
      io.post(
        io.apiAdminStudentMainAccount,
        {
          studentId: studentId
        },
        function(ret) {
          action.resolve()
          if (ret.success) {
            _this.studentBalanceAmount = new Number(
              (ret.data || { balanceAmount: 0 }).balanceAmount
            )
            console.log('lb')
          } else {
            _this.$alert(ret.desc)
          }
        }
      )
      return new Promise((resolve, reject) => {
        action = {
          resolve,
          reject
        }
      })
    },
    preSetupPays: function() {
      let pa = this.formData.payAmount
      let bpay = this.formData.pays.filter(p => p.payWay == 3)

      if (bpay[0] && this.studentBalanceAmount > 0) {
        bpay[0].amount =
          this.studentBalanceAmount < pa ? this.studentBalanceAmount : pa
        pa = pa - bpay[0].amount
      }

      let ppay = this.formData.pays.filter(p => p.payWay == 1)

      if (ppay[0]) {
        ppay[0].amount = pa
      }
    }
  },

  beforeDestroy: function() {
    delete this.requestPayId
  }
}
</script>
<style lang="less" scoped>
.discount-tag {
  position: absolute;
  line-height: normal;
  white-space: normal;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
  width: 684px;
}
.closeBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 45%;
}
</style>
